<template>
	<view class="Global">
		<!-- 背景图片铺满 -->
		<!-- <image class="imagepage" src="/static/logo.png" mode=""></image> -->
		<bgImage></bgImage>
		<MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>

		<!-- 	<view class="personnel"  :style="{'height':tarbarHeight+'px'}">
			<text class="title">{{personnel}}</text>
		</view> -->

		<view class="content">
			<image src="../../static/moren.png" class="img" mode="widthFix"></image>
			<view class="">
				<view class="info">
					<text>{{name}}</text>
					<text class="occupation">{{occupation}}</text>
				</view>
				<!--				<view class="department">-->
				<!--					<text>{{department}}</text>-->
				<!--					<image src="../../static/index/you_jiantou.png" class="departmentImg" mode="widthFix"></image>-->
				<!--				</view>-->
				<picker mode="selector" :value="storeName" :range="storeList" range-key="name" @change="chooseHobby">
					<view class="department">
						<text>{{storeName}}</text>
            <uni-icons class="infoArrow" type="right" size="12"></uni-icons>
<!--						<image src="../../static/index/you_jiantou.png" class="departmentImg" mode="widthFix"></image>-->
					</view>
				</picker>
			</view>
		</view>


		<view class="infoContent">
			<!-- 个人信息 -->
			<view class="infoMine" @click="infoClick()">
				<view class="infoTip">
					<image src="../../static/geren_xinxi.png" mode="" class="infoLogo"></image>
					<text class="infoText">{{Info}}</text>
				</view>
				<uni-icons class="infoArrow" type="right" size="12"></uni-icons>
			</view>
			<view class="line"></view>
			<!-- 修改密码 -->
			<view class="infoMine" @click="changePassword()">
				<view class="infoTip">
					<image src="../../static/xiugai_mima.png" mode="" class="infoLogo"></image>
					<text class="infoText">{{passWord}}</text>
				</view>
				<!-- <image src="../../static/index/you_jiantou.png" mode="widthFix" class="infoArrow"></image> -->
				<!-- <uni-icons type="right" color="#EEEE00"  size="30"></uni-icons> -->
				<uni-icons class="infoArrow" type="right" size="12"></uni-icons>

			</view>

		</view>

		<view class="loginContent">

			<button @click="loginClick()" style="color:#ffffff" class="login" type="default">{{login}}</button>
		</view>


	</view>
</template>

<script>
	import bgImage from '@/components/backgroundImage.vue'
	import MyNav from '@/components/customnavbar.vue'

	import {
		getInfo,
    getStoreList
	} from '@/pages/api/api.js'

	export default {
		components: {
			MyNav,
			bgImage
		},
		data() {
			return {
				name: '',
				occupation: '员工',
				department: '所属部门',
				storeName: '',
				Info: '个人信息',
				passWord: '修改密码',
				login: '退出登录',
				personnel: '个人中心',

				tops: 0,
				height: 0,
				tarbarHeight: 0,

				title: '个人中心',
				isback: false,


				user: {
					storeId: '',
					tenantId: '',

				},
				storeList: [],
			}
		},
		onLoad() {

			// const app = getApp();
			// this.user.storeId = app.globalData.storeId
			// this.user.tenantId = app.globalData.tenantId
			// this.getInfo()
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			// 退出登录
			loginClick(){
				uni.reLaunch({
					url:'/pages/login/login'
				})

			},

			// 工厂选择
			chooseHobby(e) {
				// console.log(e);
				let key = e.detail.value
				this.storeName = this.storeList[key].name

				// console.log("工厂", this.storeName,this.StoreList, e)
			},



			getInfo() {

				getInfo().then((res) => {
					console.log('11获取数据成功', res);

					if (res.code == 200) {
						this.name = res.user.nickName
						this.occupation = res.user.userType=='01' ? '老板' : '员工'
						// this.department = res.user.dept.deptName
						this.storeName = res.user.storeName
						// 保存userInfo 用户信息
            uni.setStorageSync('userInfo', res.user)
            uni.setStorageSync("store", res.store)
            uni.setStorageSync("roles", res.roles)
            uni.setStorageSync("permissions", res.permissions)
            uni.setStorageSync("storeId", res.user.storeId)
            uni.setStorageSync("tenantId", res.user.tenantId)
            const app = getApp();
            app.globalData.storeId=res.user.storeId
            app.globalData.tenantId=res.user.tenantId
						this.getStoreList(res.user.storeId, res.user.tenantId);

					} else {
						// 提示错误信息
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}


				}).catch((err) => {
					// console.error('11获取数据失败', err);
					uni.showToast({
						title: err.msg
					});
				});
			},
			getStoreList(storeId, tenantId) {
				let data = {
					tenantId: tenantId
				}
				getStoreList(data).then((res) => {
					if (res.code == 200) {
						this.storeList = res.data
						// this.storeName = this.storeList.findIndex(item=>{
						//   if(item.id === storeId){
						//     return item.name
						//   }
						// })
					}
				})
			},

			// 修改密码
			changePassword() {
				uni.navigateTo({
					url: 'changePassword/changePassword',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			// 个人信息
			infoClick() {

				uni.navigateTo({
					url: '/pages/mine/personalInformation/personalInformation',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}


		},
		onReady() {
			// 获取标题栏和状态栏高度
			uni.getSystemInfo({
				success: (e) => {
					this.tops = e.statusBarHeight;
					let custom = uni.getMenuButtonBoundingClientRect();
					this.height = custom.height + (custom.top - e.statusBarHeight) * 2;
					this.tarbarHeight = this.tops + this.height;
				}
			})

		}
	}
</script>

<style>
	.personnel {
		display: flex;
		justify-content: center;
		align-items: center;


	}

	.title {
		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		line-height: 36rpx;
	}

	.imagepage {

		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}

	.loginContent {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		background-color: #45A8FF;

	}

	.login {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		width: 550rpx;
		height: 110rpx;

		border-radius: 30rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
		font-weight: bold;

		bottom: 60rpx;
		position: absolute;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);

	}

	.Global {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.content {
		display: flex;
		flex-direction: row;
		align-items: left;
		justify-content: left;
		margin-top: 64rpx;
		width: 100%;

	}

	.img {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		margin-left: 30rpx;


	}

	.info {
		margin-left: 32rpx;
		font-weight: bold;
		font-size: 40rpx;
		color: #333333;
		line-height: 40rpx;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: left;
		margin-top: 28rpx;
	}

	.occupation {

		display: flex;
		align-items: center;
		justify-content: center;
		width: 80rpx;
		height: 36rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
		border-radius: 18rpx;
		margin-left: 19rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 20rpx;
		color: #FFFFFF;
		line-height: 40rpx;

	}

	.department {
		display: inline-flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-left: 32rpx;
		margin-top: 20rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;

	}

	.departmentImg {
		width: 20rpx;
		height: 20rpx;
		background: #333333;
		margin-left: 21rpx;
	}

	.infoContent {
		display: flex;
		/* justify-content: center; */
		align-items: center;
		flex-direction: column;


		width: 690rpx;
		height: 240rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 41rpx;
	}

	.line {
		width: 610rpx;
		height: 1rpx;
		background: #EEEEEE;
	}



	.infoMine {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 120rpx;

	}

	.infoTip {
		/* 	background-color: #333333; */
		/* background-color: #0AE1C6; */
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.infoLogo {
		width: 30rpx;
		height: 32rpx;
		margin-left: 44rpx;
	}

	.infoText {
		ont-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #333333;
		margin-left: 32rpx;

	}

	.infoArrow {
		width: 30rpx;
		height: 30rpx;
		margin-right: 40rpx;
	}
</style>
